<template>
	<view>
<view v-if="isLoading" style="width: 100%;height: calc(100vh);position: absolute;z-index: 10000;">
			<image src="../../../static/icon/loading.png" style="width: 110rpx;height: 110rpx;" class="loading" mode=""></image>
		</view>
		<view @click="closeAny" v-if="showToken||isShow10||isShow||isShow2" style="width: 100%;height: calc(100vh);position: absolute;z-index: 98;"></view>
		<view class="TC" style="position: relative;z-index: 99999;" v-if="showToken">
			<view class="box" style="height: 708rpx;">
				<view class="box1">
					<view class="box1-a">
						<view style="color: #9471fe;font-size: 40rpx;line-height: 100rpx;">提示</view>
						<!-- <view style="color: rgb(189,189,189);">祝福视频</view> -->

						<view style="color: #9471fe;font-size: 40rpx;">
							登录已过期！请重新登录！
						</view>
						<view class="btnA">
							<button type="button" style="color: #FFFFFF; " @click="cleartoken()">确 认</button>
						</view>
					</view>
					<view class="box2-a">
					</view>
				</view>
			</view>
		</view>

		<view class="TC" style="position: relative;z-index: 99999;" v-if="isShow10">
			<view class="box" style="height: 708rpx;">
				<view class="box1">
					<view class="box1-a">
						<view style="color: #9471fe;font-size: 40rpx;line-height: 100rpx;">提示</view>
						<!-- <view style="color: rgb(189,189,189);">祝福视频</view> -->

						<view style="font-size: 40rpx;
			    color: #9471fe;width: 426rpx;text-align: center;">{{msg}}</view>
						<view class="btnA">
							<button type="button" style="color: #FFFFFF; " @click="closeTC10()">确 认</button>
						</view>
					</view>
					<view class="box2-a">
					</view>
				</view>
			</view>
		</view>


		<view class="TC" style="position: relative;z-index: 99999;" v-if="isShow">
			<view class="box">

				<view class="box1">
					<view class="box1-a">
						<view style="color: #9471fe;font-size: 24px;">{{public_message_list[0].title}}</view>
						<!-- <view style="color: rgb(189,189,189);">{{public_message_list[0].content}}</view> -->
						<view>
							<!-- 图片代替 -->
							<!-- <image 
								src="../../../static/icon/视频.jpg" alt=""> -->
							<!-- 视频 -->
							<!-- <video
								style="padding-top: 36rpx;padding-bottom: 60rpx;width: 540rpx;height: 280rpx;margin: 44rpx 0px;"
								:src="imgURL+public_message_list[0].video"></video> -->

							<video v-if="public_message_list[0].message_type=='3'"
								style="padding-top: 36rpx;padding-bottom: 60rpx;width: 540rpx;height: 280rpx;margin: 44rpx 0px;"
								:src="imgURL+public_message_list[0].video"></video>
							<image v-else-if="public_message_list[0].message_type=='2'"
								style="padding-top: 36rpx;padding-bottom: 60rpx;width: 540rpx;height: 280rpx;margin: 44rpx 0px;"
								:src="imgURL+public_message_list[0].picture"></image>
							<text style="    color: rgb(148, 113, 254);text-align: center;font-size: 40rpx;"
								v-else-if="public_message_list[0].message_type=='1'">
								{{public_message_list[0].content}}
							</text>
						</view>

						<view class="btnA">
							<button type="button" style="color: #FFFFFF; " @click="closeTC()">确认</button>
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="TC" style="position: relative;z-index: 99998;" v-if="isShow2">
			<view class="box">

				<view class="box1">
					<view class="box1-a">
						<view style="color: #9471fe;font-size: 24px;">{{private_message_list[0].title}}</view>
						<view style="color: rgb(189,189,189);">{{private_message_list[0].content}}</view>
						<view>
							<!-- 图片代替 -->
							<!-- <image 
								src="../../../static/icon/视频.jpg" alt=""> -->
							<!-- 视频 -->
							<video v-if="private_message_list[0].message_type=='3'"
								style="padding-top: 36rpx;padding-bottom: 60rpx;width: 540rpx;height: 280rpx;margin: 44rpx 0px;"
								:src="imgURL+private_message_list[0].video"></video>
							<image v-else-if="private_message_list[0].message_type=='2'"
								style="padding-top: 36rpx;padding-bottom: 60rpx;width: 540rpx;height: 280rpx;margin: 44rpx 0px;"
								:src="imgURL+private_message_list[0].picture"></image>
							<text v-else-if="private_message_list[0].message_type=='1'">
								{{private_message_list[0].content}}
							</text>
						</view>

						<view class="btnA">
							<button type="button" style="color: #FFFFFF; " @click="closeTC3()">确认</button>
						</view>
					</view>

				</view>
			</view>
		</view>
		<!-- <BackPage></BackPage>
		<view class="title">
			<view class="til">
				<image src="../../../static/icon/icon1/头像.png" mode=""></image>
				<text>我 的</text>
			</view>
		</view> -->
		<!-- openTC -->
		<!-- <view class="mack-a" :style=" 'filter: blur('+this.$store.state.mackNum+'px);'"> -->
		<view class="mack-a" :style=" 'filter: blur('+this.$store.state.mackNum+'px);'">
			<view class="gameList">

				<scroll-view style="height: calc(86vh);" class="scroll-box" scroll-y="true" @scroll="scrollEvent">
					<view @click="goURL(item)" :style="'background-image: url('+imgURL+item.banner+');'"
						:class="'game'+item.open_level" v-for="(item,index) in gamelist">

						<view class="game-a">
							<view class="g-lf">
								<!-- <image :src="imgURL+item.banner" mode=""></image> -->
								<!-- <image :src="'../../../static/icon/icon1/游戏'+item.open_level+'.png'" mode=""></image> -->
								<text style="font-size: 44rpx;margin: 16rpx 0px 24rpx 100rpx;">{{item.name}}</text>
							</view>
							<view class="g-ri">
								<text v-if="item.suo=='j'">go!</text>
								<text v-else>未解锁</text>
							</view>
						</view>
						<view class="game-b">
							<view class="g-b-lf">
								<!-- <view v-if="item.open_level==1">
										初始&nbsp;&nbsp;"修"&nbsp;&nbsp;段位解锁此游戏
									</view>
									<view v-else-if="item.open_level==0">
										已解锁此游戏
									</view>
									<view v-else-if="item.open_level==2">
										初始&nbsp;&nbsp;"齐"&nbsp;&nbsp;段位解锁此游戏
									</view>
									<view v-else-if="item.open_level==3">
										初始&nbsp;&nbsp;"治"&nbsp;&nbsp;段位解锁此游戏
									</view>
									<view v-else-if="item.open_level==4">
										初始&nbsp;&nbsp;"平"&nbsp;&nbsp;段位解锁此游戏
									</view> -->
								<view style="width:430rpx;">
									{{item.remark.split('|')[0]}}
									{{item.remark.split('|')[1]}}
								</view>
							</view>
							<view class="g-b-ri">
								<image :src="'../../../static/icon/icon8/0'+item.suo+'.png'" mode=""></image>
							</view>
						</view>
						<view v-if="item.game_id_num" style="text-align: center; color: #FFFFFF; width: 100rpx; margin-left: 8%;margin-top: -20rpx;background: rgb(209,121,241);display: inline-block;border-radius: 20rpx;">
							{{item.game_id_num+'/2'}}
						</view>
						<view v-else style="text-align: center; color: #FFFFFF; width: 100rpx; margin-left: 8%;margin-top: -20rpx;background: rgb(209,121,241);display: inline-block;border-radius: 20rpx;">
							0/2
						</view>
					</view>
				</scroll-view>

			</view>

			<!-- <view class="game1 mag">
					<view class="game-a">
						<view class="g-lf">
							<image src="../../../static/icon/icon1/游戏2.png" mode=""></image>
							<text style="color: rgb(204,0,48);">游戏2</text>
						</view>
						<view class="g-ri">
							<text style="color: rgb(204,0,48);">未解锁</text>
						</view>
					</view>
					<view class="game-b">
						<view class="g-b-lf">
							<view>
								升级到&nbsp;&nbsp;"奇"&nbsp;&nbsp;段位并获得&nbsp;&nbsp;"修"&nbsp;&nbsp;勋章解锁此游戏
							</view>
							<view>
								游戏达到指定积分可抽取20Cool贝兑换码2次
							</view>
						</view>
						<view class="g-b-ri">
							<image src="../../../static/icon/icon1/go2.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="game2 mag">
					<view class="game-a">
						<view class="g-lf">
							<image src="../../../static/icon/icon1/游戏3.png" mode=""></image>
							<text style="color: rgb(0,115,186);">游戏3</text>
						</view>
						<view class="g-ri">
							<text style="color: rgb(0,115,186);">未解锁</text>
						</view>
					</view>
					<view class="game-b">
						<view class="g-b-lf">
							<view>
								升级到&nbsp;&nbsp;"奇"&nbsp;&nbsp;段位并获得&nbsp;&nbsp;"修"&nbsp;&nbsp;勋章解锁此游戏
							</view>
							<view>
								游戏达到指定积分可抽取20Cool贝兑换码3次
							</view>
						</view>
						<view class="g-b-ri">
							<image src="../../../static/icon/icon1/go3.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="game3 mag">
					<view class="game-a">
						<view class="g-lf">
							<image src="../../../static/icon/icon1/游戏4.png" mode=""></image>
							<text style="color: rgb(0,166,113);">游戏4</text>
						</view>
						<view class="g-ri">
							<text style="color: rgb(0,166,113);">未解锁</text>
						</view>
					</view>
					<view class="game-b">
						<view class="g-b-lf">
							<view>
								升级到&nbsp;&nbsp;"治"&nbsp;&nbsp;段位并获得&nbsp;&nbsp;"齐"&nbsp;&nbsp;勋章
							</view>
							<view>
								游戏打到指定积分可抽取20Cool贝兑换码3次
							</view>
						</view>
						<view class="g-b-ri">
							<image src="../../../static/icon/icon1/go4.png" mode=""></image>
						</view>
					</view>
				</view> -->

		</view>

		<!-- </view> -->
		<!-- <Navbar></Navbar> -->
		<Tabbar></Tabbar>
	</view>
</template>

<script>
	import uniRequest from '@/until/uni-request.js'
	import Tabbar from '@/components/TabBar.vue'
	import {
		mapMutations,mapState
	} from 'vuex'
	// import BackPage from '../../../components/BackPage.vue'
	export default {
		computed: {//加载数据过程loading
			    ...mapState(["isLoading"])
			},
		components: {
			Tabbar
		},
		created() {
			// this.getUser()
			// this.getDHlist()
			// closeTC2(),
			console.log('create');
			this.getGamelist()
			this.getXxlist()
			// this.getDHlist()
			// this.$forceUpdate()
		},
		onShow() {
			console.log('onShow');
			this.closemackNum()
		this.getUser()
		this.getDHlist()
			if(this.level!=4){
				this.closeAny()
			}
			
			this.changeiconzy()
			// this.$router.llj=0
			// console.log(this.$router);
			if (uni.getStorageSync('shuaxin') == 0) {
				// const timer = setTimeout(() => {
				this.$router.go(0)
				uni.setStorageSync('shuaxin', 1)
				// }, 500)
			}

		},

	
		data() {
			return {
				showToken: false,
				isShow10: false,
				msg: '',
				url: '@/static/icon/icon1/back0.png',
				gamelist: [],
				listAll: [], //所有数据
				showList: [], //可视区域显示的数据				
				itemHeight: 105, //每条数据所占高度
				showNum: 6, //每次加载到可视区域的数量，itemHeight X showNum 要可视区域高度 ，否则页面滚动不了。
				top: 0, //偏移量
				scrollTop: 0, //卷起的高度
				startIndex: 0, //可视区域第一条数据的索引
				endIndex: 0, //可视区域最后一条数据后面那条数据的的索引，因为后面要用slice(start,end)方法取需要的数据，但是slice规定end对应数据不包含在里面	
				level:'',
				isShow: '',
				isShow2: '',
				imgURL: 'http://113.31.109.223:8000/file/file/download?fileId=',
				num: 4,
				private_message_list: [],
				public_message_list: [],
				duilist:[],
			}
		},
		mounted() {
			this.dhgame()
		},
		methods: {
			dhgame(){
				for(let i=0;i<this.gamelist.length;i++){
					for(let j=0;j<this.duilist.length;j++){
						if(this.gamelist[i].sort_order==this.duilist[j].game_id){
							this.gamelist[i].game_id_num=this.duilist[j].num
							console.log(this.gamelist[i]);
						}
					}
				}
				// this.gamelist.forEach((item,index)=>{
				// 	if(item.sort_order){
						
				// 	}
				// })
			},
			getDHlist(){
				uniRequest.post('baseonlinegame/baseonlinegame/exchangelist').then((res) => {
					console.log(res);
					this.duilist=res.data.data
					// this.gamelist.forEach(())
					this.dhgame()
				}).catch((err) => {
					console.log(err);
				});
			},
			closeAny(){
				this.showToken=false
				this.isShow10=false
				this.isShow=false
				this.isShow2=false
				this.closeTC()
			},
			getUser() {

				uniRequest.post('user/user/query').then((res) => {
					console.log(res);
					uni.setStorageSync('level', res.data.data.level)
					this.level=res.data.data.level
					// console.log(uni.getStorageSync('level'));
				}).catch((err) => {
					console.log(err);
				});
			},
			cleartoken() {
				this.showToken = false
				uni.clearStorage();
				this.$router.go(0)
			},
			paixu() {
				console.log(this.gamelist);
				this.gamelist.sort((a, b) => {
					return a.open_level - b.open_level
				})
				console.log(this.gamelist);
			},
			//计算可视区域数据
			getShowList() {
				this.startIndex = Math.floor(this.scrollTop / this.itemHeight); //可视区域第一条数据的索引
				this.endIndex = this.startIndex + this.showNum; //可视区域最后一条数据的后面那条数据的索引
				this.showList = this.listAll.slice(this.startIndex, this
					.endIndex) //可视区域显示的数据，即最后要渲染的数据。实际的数据索引是从this.startIndex到this.endIndex-1
				this.top = this.scrollTop - (this.scrollTop % this
					.itemHeight); //在这需要获得一个可以被itemHeight整除的数来作为item的偏移量，这样随机滑动时第一条数据都是完整显示的
			},

			//区域滚动事件
			scrollEvent(e) {
				this.scrollTop = e.detail.scrollTop
				this.getShowList()
			},

			closeTC10() {
				this.isShow10 = false
			},
			goURL(item) {
				console.log(uni.getStorageSync('level'));
				console.log(item.open_level);
				if (uni.getStorageSync('level') >= item.open_level) {
					location.href = item.game_link
				} else {
					this.msg = "勋章段位不符合"
					this.isShow10 = true
					// alert('段位不符合')
				}

				console.log(item.game_link);
				// uni.navigateTo({
				// 　　url: '/components/wibview/wibview?url=' + url
				// })
			},
			getGamelist() {
				console.log("游戏列表");
				uniRequest.post('baseonlinegame/baseonlinegame/list', {
					"pageNum": 1,
					"pageSize": 20,
					"sortField": "sort_order", 
					"sortOrder": "asc" 
				}).then((res) => {
					if (res.data.code == "1002") {
						this.showToken = true
					}
					console.log(res);
					this.gamelist = res.data.data.data
					
					this.gamelist.forEach((item, index) => {
						// item.dh=this.duilist
						if (item.open_level <= uni.getStorageSync('level')) {
							item.suo = 'j'
						} else {
							item.suo = 's'
						}
					})
					console.log(this.gamelist);
					
					this.paixu()
					this.dhgame()
						
					
				}).catch((err) => {
					// uni.removeStorage({
					//     key:'token',
					//     success: function(res){
					//         console.log('删除成功')
					//     }
					// })
					console.log(err);
				});
			},
			openTC3() {
				if (this.private_message_list.length != 0) {
					console.log(11);
					this.isShow2 = true
					this.openTC2()
					this.viewMessage(this.private_message_list[0].id)
				} else {
					this.isShow2 = false
				}
			},
			closeTC3() {
				this.isShow2 = false
				this.closeTC2()
			},
			openTC() {

				if (this.public_message_list.length != 0&&this.level==4) {

					console.log(11);
					this.isShow = true
					this.openTC2()
					this.viewMessage(this.public_message_list[0].id)
				} else {
					this.isShow = false
				}
			},
			closeTC() {
				this.isShow = false
				this.closeTC2()
			},
			getXxlist() {
				uniRequest.post('message/message/list', {}).then((res) => {
					console.log(res);
					this.private_message_list = res.data.data.private_message_list
					this.public_message_list = res.data.data.public_message_list
					this.openTC()
					this.openTC3()
				}).catch((err) => {
					console.log(err);
				});
			},
			viewMessage(id) {
				uniRequest.post('message/message/detail', {
					"id": id
				}).then((res) => {
					console.log(res);

				}).catch((err) => {
					console.log(err);
				});
			},
			...mapMutations(['closemackNum','openTC2', 'closeTC2','changeiconzy']),
		}
	}
</script>

<style lang="scss" scoped>
	@-webkit-keyframes tdtc {
		0% {
			transform: scale(0.8); 
			// transform: scale(0.8);  
			opacity: 0.5;  
		}
	// 50% {
	// 	transform: scale(1);  
	// 	// opacity: 0.5;  
	// }
	45%{
		transform: scale(1);
		opacity: 1; 
	}
		// 90% {
		// 	transform: scale(1);
		// 	opacity: 1; 
		// }
		100% {
			transform: scale(1);
			opacity: 1; 
		}
	}
	.TC {
		animation-name:tdtc;
		animation-duration:0.9s;
		transform-origin:350rpx 500rpx;
		animation-timing-function:cubic-bezier(0.01, 1.24, 0.08, 1.36);
		animation-iteration-count:1;
		animation-play-state: running;
		.toptext {
			position: absolute;
			// top: -8%;
			top: 100rpx;
			left: 35%;
			z-index: 999;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.text-a {

				font-size: 46rpx;
			}

			.text-b {
				color: rgb(148, 113, 254);
				font-size: 32rpx;
			}
		}

		height: 100%;
		background-color: rgb(255, 255, 255);

		// background: linear-gradient(#7a52c0, #d7d7d7) no-repeat;
		.title {
			text-align: center;
			line-height: 100rpx;
			font-size: 60rpx;
			color: rgb(164, 133, 237);
		}

		.box {
			z-index: 99;
			background-color: #fff;

			.box1 {

				// margin-top: 20rpx;
				.box1-a {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 300px;
					align-items: center;

					image {
						width: 552rpx;
						height: 319rpx;
					}
				}
			}

			.send {
				position: absolute;
				right: 52rpx;

				uni-button {
					border-radius: 100rpx;
					height: 92rpx;
					line-height: 92rpx;
					color: #fff;
					width: 144rpx;
					background: rgb(121, 72, 234);
					font-size: 28rpx;
				}
			}

			.box2-a {
				width: 94%;
				height: 16px;
				background-color: #fffefe7d;
				box-shadow: 0px 5px 50px #9e9e9e3b;
				border-radius: 0rem 0rem 10px 10px;
				/* opacity: 0.4; */
				position: absolute;
				left: 3%;
				bottom: -16px;
				// /* z-index: -1;
			}

			.u-input--border[data-v-fdbb9fe6] {
				border-radius: 100rpx;
				height: 96rpx;
				box-sizing: border-box;
				padding-top: 8rpx !important;
				margin-left: 10rpx;
			}

			.username {
				font-size: 18px;
				display: flex;
				align-items: center;

				image {
					width: 16px;
					height: 16px;
					margin-right: 4px;
				}
			}

			.password {
				font-size: 18px;
				display: flex;
				align-items: center;
				margin-top: 30px;

				image {
					width: 16px;
					margin-right: 4px;
					height: 16px;
				}
			}

			.sms {
				display: flex;
				justify-content: end;
				color: rgb(164, 133, 237);
				padding: 10% 0;
				padding-bottom: 12%;
				margin-right: 36rpx;
			}

			z-index: 99;
			background-color: #fff;
			box-sizing: border-box;
			padding: 48rpx;
			box-shadow: 0px 10rpx 100rpx #9e9e9e80;
			position: absolute;
			background: #fff;
			width: 90%;
			height: 818rpx;
			border-radius: 2%;
			top: 228rpx;
			left: 5%;

			.btnA {

				width: 67%;
				margin: 0px auto;
				// margin-top: 40%;

				uni-button {
					border-radius: 64rpx;
					background: linear-gradient(to right, #A272FC, #DE62D2);
				}
			}

			.btnB {
				width: 60%;

				uni-button {
					margin-top: 20rpx;
					border-radius: 32px;
					color: #7a52c0;
				}

				margin: 0px auto;
			}
		}
	}

	// .title {
	// 	display: flex;
	// 	justify-content: space-evenly;
	// 	padding-bottom: 58rpx;

	// 	.til {
	// 		font-size: 60rpx;
	// 		color: #9471fe;
	// 		display: flex;
	// 		align-items: center;
	// 	}

	// 	width: 100%;
	// 	background-color: #fff;

	// 	image {
	// 		width: 111rpx;
	// 		height: 111rpx;
	// 		margin-right: 40rpx;
	// 	}
	// }
	.scroll-box {
		height: 300px;
		width: 100%;
		position: relative;
		// border: 1px solid red;
		// margin-top: 10rpx;
		box-sizing: border-box;

		// -webkit-padding-bottom: 60rpx;
		// padding-left: 28rpx;
		// height: calc(55vh);

		.uni-scroll-view-content {
			width: 100%;
			display: flex;
			justify-content: space-around;
			height: 100%;
		}
	}

	.gameList {

		
		// height: calc(100vh);
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		margin-top: 6px;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		// background-image: url('@/static/icon/icon1/背景1.png');
		// background-position: 100%;
		// background-size: 110%;
		// background-repeat: no-repeat;
		// background-color: #9471fe;
		// height: calc(100vh - 130px);

		// background-position: 100%;
		// background-size: 100%;
		// background-color: #9471fe;
		.mag {
			// margin: 30rpx 0 !important;
			// height: 220rpx !important;
		}

		.game3 {
			// margin: 10px 0rpx;
			border-radius: 40rpx;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			// flex-direction: column;
			// padding: 0px 10px;
			background-image: url('@/static/icon/icon1/back3.png');
			background-position: 104% 54%;
			background-size: 794rpx 334rpx;
			width: 100%;
			height: 266rpx;
			margin: 20rpx 0px;

			.game-a {
				display: flex;

				justify-content: space-between;
				box-sizing: border-box;
				padding: 0px 60rpx;
				padding-top: 20rpx;
				width: 100%;
				color: rgb(186, 81, 0);

				.g-lf {
					display: flex;
					font-size: 58rpx;
					padding-top: 6rpx;

					image {
						margin-left: -10px;
						margin-right: 24rpx;
						margin-top: 4rpx;
						width: 99rpx;
						height: 92rpx;
					}
				}
			}

			.game-b {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				color: rgb(255, 251, 247);

				.g-b-lf {
					text-align: end;
					font-size: 24rpx;
				}

				.g-b-ri {
					vertical-align: middle;
					height: 60rpx;

					image {
						width: 96rpx;
						height: 68rpx;
						margin-left: 16rpx;
						margin-right: 44rpx;
					}
				}
			}
		}

		.game2 {
			// margin: 10px 0rpx;
			border-radius: 40rpx;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			// flex-direction: column;
			// padding: 0px 10px;
			background-image: url('@/static/icon/icon1/back2.png');
			background-position: 104% 54%;
			background-size: 794rpx 334rpx;
			width: 100%;
			height: 266rpx;
			margin: 20rpx 0px;

			.game-a {
				display: flex;

				justify-content: space-between;
				box-sizing: border-box;
				padding: 0px 60rpx;
				padding-top: 20rpx;
				width: 100%;
				color: rgb(186, 81, 0);

				.g-lf {
					display: flex;
					font-size: 58rpx;
					padding-top: 6rpx;

					image {
						margin-left: -12rpx;
						margin-right: 38rpx;
						margin-top: 12rpx;
						width: 68rpx;
						height: 81rpx;
					}
				}
			}

			.game-b {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				color: rgb(255, 251, 247);

				.g-b-lf {
					text-align: end;
					font-size: 24rpx;
				}

				.g-b-ri {
					vertical-align: middle;
					height: 60rpx;

					image {
						width: 96rpx;
						height: 68rpx;
						margin-left: 16rpx;
						margin-right: 44rpx;
					}
				}
			}
		}

		.game1 {
			// margin: 10px 0rpx;
			border-radius: 40rpx;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			// flex-direction: column;
			// padding: 0px 10px;
			background-image: url('@/static/icon/icon1/back1.png');
			background-position: 104% 54%;
			background-size: 794rpx 334rpx;
			width: 100%;
			height: 266rpx;
			margin: 24rpx 0px;

			.game-a {
				display: flex;

				justify-content: space-between;
				box-sizing: border-box;
				padding: 0px 60rpx;
				padding-top: 20rpx;
				width: 100%;
				color: rgb(186, 81, 0);

				.g-lf {
					display: flex;
					font-size: 58rpx;
					padding-top: 6rpx;

					image {
						margin-left: -12px;
						margin-right: 20rpx;
						width: 98rpx;
						height: 94rpx;
					}
				}
			}

			.game-b {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				color: rgb(255, 251, 247);

				.g-b-lf {
					text-align: end;
					font-size: 24rpx;
				}

				.g-b-ri {
					vertical-align: middle;
					height: 60rpx;

					image {
						width: 96rpx;
						height: 68rpx;
						margin-left: 16rpx;
						margin-right: 44rpx;
					}
				}
			}
		}

		.game0 {
			// margin: 10px 0rpx;
			border-radius: 40rpx;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			// flex-direction: column;
			// padding: 0px 10px;
			background-image: url('@/static/icon/icon1/back0.png');
			// background-position: 85%;
			// background-size: 108%;
			// width: 100%;
			// height: 200rpx;
			// border-radius: 20px;
			// background-image: url(/static/img/背景1.2fb35940.png);
			background-position: 104% 54%;
			background-size: 794rpx 334rpx;
			width: 100%;
			height: 266rpx;
			margin: 24rpx 0px;

			.game-a {
				display: flex;

				justify-content: space-between;
				box-sizing: border-box;
				padding: 0px 60rpx;
				padding-top: 20rpx;
				width: 100%;
				color: rgb(186, 81, 0);

				.g-lf {
					display: flex;
					font-size: 58rpx;
					padding-top: 6rpx;

					image {
						margin-left: -8px;
						margin-right: 30rpx;
						width: 80rpx;
						height: 80rpx;
					}
				}
			}

			.game-b {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				color: rgb(255, 251, 247);

				.g-b-lf {
					text-align: end;
					font-size: 24rpx;
				}

				.g-b-ri {
					vertical-align: middle;
					height: 60rpx;

					image {
						width: 96rpx;
						height: 68rpx;
						margin-left: 16rpx;
						margin-right: 44rpx;
					}
				}
			}
		}
	}
</style>
